<template>
   <div class="main">
      <div class="author-manage-list">
        <div class="live-author-info">
            <div>
              <h4 class="author-title" v-if="authorInfo.liveTitle">{{authorInfo.liveTitle}}</h4>
              <p class="author-time" v-if="authorInfo.beginDate">{{authorInfo.beginDate}}</p>
            </div>
            <div class="author-name" v-if="authorInfo.nickname">主播：{{authorInfo.nickname}}</div>
        </div>
        <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column align="center" label="抽奖口号" prop="slogan"></el-table-column>
            <el-table-column align="center" label="奖品" prop="prize"></el-table-column>
            <el-table-column align="center" label="创建时间" prop="createdAt"></el-table-column>
            <el-table-column align="left" label="操作" width="380">
              <template slot-scope="scope">
                <el-button type="primary" v-if="rightsButtons['lookResult']" size="mini" plain @click="handleLuckResult(scope.row)">抽奖结果</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="listQuery.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="listQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
          ></el-pagination> -->
        <el-dialog title="抽奖结果" :visible.sync="showDialog" width="40%">
          <ul class="award-info">
            <li>抽奖奖品： {{resultPize.prize}}</li>
            <li>抽奖口号：{{resultPize.slogan}}</li>
            <li>抽奖人数：{{resultPize.winNum}}人</li>
          </ul>
          <el-table :data="resultList"  border>
            <el-table-column type="index" width="50" label="序号"></el-table-column>
             <!-- <el-table-column align="center" label="姓名" prop="nickName"></el-table-column> -->
             <el-table-column align="center" label="手机号" prop="mobile"></el-table-column>
             <el-table-column align="center" label="账号" prop="nickName"></el-table-column>
          </el-table>
          <!-- <span slot="footer" class="dialog-footer"> -->
            <!-- <el-button @click="resetParams">取 消</el-button>
            <el-button type="primary" @click="setLiveReview">确 定</el-button> -->
          <!-- </span> -->
        </el-dialog>
      </div>
  </div>
</template>
<script>
import { getDrawList, getWinnerList } from '@/api/bizhibo'
export default {
  data() {
    return {
      listLoading: false,
      liveId: '',
      showDialog: false,
      // listTotal: 0,
      list: [],
      authorInfo: {},
      resultList: [],
      resultPize: {}
      // listQuery: {
      //   pageSize: 10,
      //   pageIndex: 1
      // }
    }
  },
  created() {
    this.liveId = this.$route.params.id
    this.getLuckData()
  },
  methods: {
    // 获取抽奖结果列表
    getLuckData() {
      if (this.liveId) {
        getDrawList({ roundId: this.liveId }).then(res => {
          this.authorInfo = res.data
          if (res.data.liveLuckDrawVOS) {
            this.list = res.data.liveLuckDrawVOS
          }
        }).catch(err => {
          console.log(err)
          this.authorInfo = {}
           this.list = []
        })
      }
    },
    // 分页条数改变
    handleSizeChange() {console.log("123")},
    // 分页切换
    handleCurrentChange (){console.log("123")},
    // 查看抽奖结果
    handleLuckResult(row) {
      this.resultPize = row
      getWinnerList({luckDrawId: row.id}).then(res => {
        console.log(res)
        this.resultList = res.data
        this.showDialog = true
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.author-manage-list {
  padding: 20px;
  background-color: #fff;
}
.live-author-info {
  padding-bottom: 30px;
  padding-left: 10px;
}
.author-title,.author-time {
  display: inline-block;
}
.author-title {
  font-size: 20px;
}
.author-time {
  padding-left: 30px;
  font-size: 14px;
  color: #999;
}
.author-name {
  padding-top: 20px;
  font-size: 16px;
}
.award-info {
  padding-bottom: 20px;
  li {
    padding-bottom: 16px;
    padding-left: 20px;
    font-size: 18px;
  }
}
</style>
